<template>
    <div id="main-container">
      <HeaderBanner @refleshload="refleshload" />
      <NotifyMainComponents ref="child" />
      <MainBannerComponents />
    </div>
  </template>
  <script>
  import HeaderBanner from "@/components/HeaderBanner.vue";
  import NotifyMainComponents from "@/components/NotifyMainComponents.vue";
  import MainBannerComponents from "@/components/MainBannerComponents.vue";
  export default {
    name: "NotifyView",
    components: {
      HeaderBanner,
      NotifyMainComponents,
      MainBannerComponents,
    },
    props: {
      msg: String,
    },
    methods: {
      refleshload() {
        //调用子组件刷新数据
        this.$refs.child.initData();
      },
    },
  };
  </script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  #main-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }
  
  @media screen and (max-width: 720px) {
    #main-container {
      margin-top: 0px !important;
    }
  }
  </style>